<template>
  <div class="app-container" style="height: 100%;">
    <div class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
      <div class="header_search">
        <el-select class="input-item mr5" placeholder="工单类型" filterable clearable v-model="ListData.moduleId"
          :remote-method="getworkModulePageSelectChange" :loading="loading" remote remote-show-suffix>
          <el-option v-for="item in modules" :value="item.id" :disabled="item.select" :label="`${item.name}`" />
        </el-select>
        <el-select class="input-item mr5" v-model="ListData.dateType" placeholder="扣款时间" clearable
          @change="ListData.dateType == 4 ? '' : getList()">
          <el-option v-for="item in timeOptions" :key="item.value" :value="item.value" :label="item.title" />
        </el-select>
        <div class="select-time mr5" v-if="ListData.dateType == 4">
          <el-date-picker v-model="valValue" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <el-input v-model="ListData.keyword" placeholder="工单号/流水号" class="input-with" clearable
          @keyup.enter.native="getList">
        </el-input>
        <button class="btn btn-bg1 mr5" @click="getList">
          <el-icon class="mr5">
            <Search />
          </el-icon>搜索
        </button>
        <button class="btn btn-bg5 " @click="clearValue">
          <el-icon class="mr5">
            <RefreshRight />
          </el-icon>重置
        </button>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" :summary-method="getSummaries" show-summary ref="tableList"
          height="100%" style="position: absolute;">
          <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
          <el-table-column show-overflow-tooltip prop="deductionTime" label="扣款时间" sortable min-width="130" fixed />
          <el-table-column show-overflow-tooltip prop="billTime" label="账单月份" min-width="130" />
          <el-table-column show-overflow-tooltip prop="workNo" label="关联工单" min-width="150">
            <template v-slot="i">
              <span class="color_text" @click="pageGo(i.row.id)">{{ i.row.workNo }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="code" label="流水号" min-width="130" />
          <el-table-column show-overflow-tooltip align="right" prop="orderTotalPrice" label="工单总金额" min-width="90">
            <template v-slot="i">
              ￥{{ i.row.orderTotalPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="right" prop="deductionTotalPrice" label="扣款总金额" min-width="90">
            <template v-slot="i">
              ￥{{ i.row.deductionTotalPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="right" prop="waitPaymentTotalPrice" label="待付总金额"
            min-width="90">
            <template v-slot="i">
              <span :style="{ color: i.row.status == 2 ? 'rgba(255, 0, 0, 1)' : '' }"> ￥{{
      i.row.waitPaymentTotalPrice.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="status" :filters="[
      { text: '已完成', value: 1 },
      { text: '失败', value: 2 },
    ]" :filter-method="filterTag" filter-placement="bottom-end" label="扣款状态" min-width="90">
            <template v-slot="i">
              <el-tag v-if="i.row.status == 1">已完成</el-tag>
              <el-tag type="error" v-if="i.row.status == 2">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="settlementType" label="结算类型" width="80">
            <template v-slot="i">
              {{ i.row.settlementType == 1 ? '预充值' : '月结' }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="remark" label="备注" width="150" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination ref="pagination" :list_total="total" @size-change="getList" @current-change="getList" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getListFactory } from '../../../api/finance'
import { workModulePageSelect } from '../../../api/order'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Warning } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const pagination = ref()
const tableList = ref()
const tableData = ref([]) // 品牌列表
const total = ref()
const valValue = ref()
const ListData = ref({
  "dateFieldType": 1,//时间字段类型：1-提款时间
  "dateType": null,//时间类型：1-今天，2-本月，3-近三个月，4-时间区间
  "endTime": "",//扣款结束时间
  "keyword": "",	//关键词搜索：工单号/流水号
  "limit": 0,
  "moduleId": null,//	工单类型
  "page": 0,
  "startTime": ""//	扣款开始时间
})
// 重置
const clearValue = () => {
  ListData.value = {
    "dateFieldType": 1,//时间字段类型：1-提款时间
    "dateType": null,//时间类型：1-今天，2-本月，3-近三个月，4-时间区间
    "endTime": "",//扣款结束时间
    "keyword": "",	//关键词搜索：工单号/流水号
    "limit": 0,
    "moduleId": null,//	工单类型
    "page": 1,
    "startTime": ""//	扣款开始时间
  }
}
// 过滤状态  成功失败
const filterTag = (value: string, row) => {
  return row.status === value
}
// 合计
const getSummaries = (param) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {

    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      if (index == 5 || index == 6 || index == 7) {
        sums[index] = `￥${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0).toFixed(2)}`
      }
    } else {
      sums[index] = ''
    }
  })
  return sums
}
// 工单详情
const pageGo = (id) => {
  router.push('/order/odetail/' + id)
}
// 报单时间
const timeOptions = ref([
  { title: '今天', value: 1 },
  { title: '本月', value: 2 },
  { title: '过去三个月', value: 3 },
  { title: '时间区间', value: 4 },
])
// 获取明细列表
const getList = async () => {
  loading.value = true
  ListData.value.limit = pagination.value.size
  ListData.value.page = pagination.value.current
  await getListFactory(ListData.value).then((res: any) => {
    total.value = parseInt(res.data.data.total)

    tableData.value = res.data.data.rows
  })
  loading.value = false
}
// 时间变化时
const dateChange = (val: any) => {
  if (val) {
    // popoverDom1.value.hide()
    ListData.value.startTime = val[0]
    ListData.value.endTime = val[1]
  } else {
    ListData.value.startTime = null
    ListData.value.endTime = null
  }
  getList()
}
// **********工单模块下拉数据*********
const modules = ref([])
const getworkModulePageSelect = (val) => {
  let data = {
    "limit": 0,
    "keyword": val,
    "page": 0
  }
  workModulePageSelect(data).then((res) => {
    if (res.data.success) {
      modules.value = res.data.data.rows
    }
  })
}
const modelValue = ref('')
const getworkModulePageSelectChange = (val) => {
  modelValue.value = val
}
watch(modelValue, (n) => {
  getworkModulePageSelect(n)
})
// *****************end************
onMounted(() => {
  getList()
  getworkModulePageSelect('')
})

</script>

<style scoped lang="scss">
@import './index';
</style>
